<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>流程设计</title>
    <!-- 引入vue -->
    <script src="/js/vue-2.7.15.js"></script>
    <!-- 引入element ui -->
    <link rel="stylesheet" href="/element-ui/css/index.css">
    <script src="/element-ui/js/element-ui.js"></script>
    <!-- 引入axios -->
    <script src="/js/axios.js"></script>
    <!-- 引入公共css样式 -->
    <link rel="stylesheet" href="/css/common.css">
    <!-- 引入bpmn-js -->
    <link rel="stylesheet" href="/bpmn-js/css/bpmn.css" />
    <link rel="stylesheet" href="/bpmn-js/css/diagram-js.css" />
    <link rel="stylesheet" href="/bpmn-js/css/bpmn-codes.css" />
    <link rel="stylesheet" href="/bpmn-js/css/bpmn-embedded.css" />
    <script src="/bpmn-js/js/bpmn-modeler.development.js"></script>
    <!-- 引入bpmn-js-properties-panel -->
    <link rel="stylesheet" href="/bpmn-js-properties-panel/css/properties-panel.css" />
    <script src="/bpmn-js-properties-panel/js/bpmn-js-properties-panel.umd.js"></script>
    <!-- 汉化 -->
    <script src="/bpmn-js/js/zh.js"></script>
    <!-- 小地图，文章教程：https://blog.csdn.net/qq_22167557/article/details/129579313 -->
    <link rel="stylesheet" href="/diagram-minimap/css/minimap.css" />
    <script src="/diagram-minimap/js/diagram-minimap.umd.js"></script>

</head>

<body>
    <div id="app">
        <!-- 画布左侧流程工具栏 -->
        <div id="canvas" ref="canvas"></div>

        <!-- 属性工具栏 -->
        <div id="properties-panel"></div>

        <!-- 操作 -->
        <div class="operate">
            <div>
                <el-button class="operate-item" size="small" icon="el-icon-search" @click="handlerSave">
                    保存
                </el-button>
            </div>
            <div>
                <el-button class="operate-item" size="small" icon="el-icon-search" @click="handlerSave(true)">
                    保存并关闭
                </el-button>
            </div>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                canvas: undefined,
                bpmnModeler: undefined,
                xml: undefined,
            }
        },
        mounted() {
            this.init();
        },
        methods: {
            async init() {
                // 获取流程信息，不存在则创建
                await axios.get('/bpmn/js/' + this.getQueryString('modelId')).then(res => {
                    if (res.data.code === 200 && res.data.data) {
                        console.log('res:', res)
                        this.xml = res.data.data.xml;
                    } else {
                        this.$message.error(res.data.msg);
                    }
                }).catch((error) => {
                    console.log(error)
                    this.$message.error(error);
                });

                this.canvas = this.$refs.canvas;

                // properties-panel给建模器提供属性编辑器，
                // camunda-bpmn-moddle拓展属性编辑器可以编辑内容
                // bpmn-js有两种模式：Modeler模式和Viewer模式，在Modeler模式下可以对流程图进行编辑，而Viewer模式则不能，仅作为展示用
                // viewer只需引入一个JS即可<script src="/bpmn-js/js/bpmn-modeler.development.js">

                // 侧边栏: Palette
                // 形状: shape
                // 连线: connection
                // 工具栏: ContextPad
                const {
                    BpmnPropertiesPanelModule,
                    BpmnPropertiesProviderModule,
                } = BpmnJSPropertiesPanel;

                const bpmnModeler = new BpmnJS({
                    container: this.canvas,

                    // 工具栏
                    propertiesPanel: {
                        parent: '#properties-panel'
                    },

                    additionalModules: [
                        // 右侧属性栏
                        BpmnPropertiesPanelModule,
                        BpmnPropertiesProviderModule,
                        // 小地图
                        DiagramJSMinimap,
                        {
                            // 汉化
                            translate: ["value", translate],
                            // 禁用滚轮滚动
                            // zoomScroll: ["value", ""],
                            // // 禁止拖动线
                            // bendpoints: ["value", ""],
                            // // 禁用左侧面板
                            // paletteProvider: ["value", ""],
                            // // 禁止点击节点出现contextPad
                            // contextPadProvider: ["value", ""],
                            // // 禁止双击节点出现label编辑框
                            // labelEditingProvider: ["value", ""]
                        },
                    ],
                    // Panel的属性扩展
                    // moddleExtensions: {
                    //     camunda:
                    // }
                });
                this.bpmnModeler = bpmnModeler;
                const canvas = this.bpmnModeler.get('canvas');
                // 设置画布背景色
                canvas._container.style.backgroundColor = '#f2f2f2'
                if (this.xml) {
                    this.bpmnModeler.importXML(this.xml, function (err) {
                        if (err) {
                            return console.error('failed to load diagram', err);
                        }
                    });
                } else {
                    bpmnModeler.createDiagram();
                }
            },
            // 保存
            async handlerSave(close) {
                const { xml } = await this.bpmnModeler.saveXML();
                const { svg } = await this.bpmnModeler.saveSVG();
                const params = new URLSearchParams() // 创建对象
                params.append("id", this.getQueryString('modelId'));
                params.append("name", '12');
                params.append("key", '12');
                params.append("xml", xml);
                params.append("svgXml", svg);
                let res = await axios({
                    url: '/bpmn/js/save/' + this.getQueryString('modelId'),
                    method: 'put',
                    data: params
                });
                if (res.data.code === 200 && res.data.data) {
                    this.$message.success('保存成功');
                    // 延时一秒关闭
                    setTimeout(() => {
                        if (close) {
                            window.close();
                        }
                    }, 1000)
                }
            },
            // 获取浏览器地址参数
            getQueryString(name) {
                const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                const r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
            },
        }
    })
</script>
<style>
    #canvas {
        width: 100%;
        height: 1024px;
        border: 1px solid #c0c0c0;
    }

    /* 右侧面板样式 */
    #properties-panel {
        position: absolute;
        top: 5px;
        right: 5px;
    }

    #properties-panel #camunda-id {
        width: 90%;
    }

    #properties-panel #camunda-versionTag {
        width: 90%;
    }

    /* 隐藏右下角logo，官方要求不能隐藏，否则侵权 */
    .bjs-powered-by {
        /*display: none;*/
    }

    /* 操作 */
    .operate {
        position: absolute;
        right: 10px;
        bottom: 100px;
        padding: 10px;
    }

    .operate-item {
        width: 110px;
        margin: 10px;
        background: rgb(255, 255, 255);
        color: black;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
        border-radius: 6px;
    }
</style>

</html>